<template>
  <div class="slot-machine">
    <div class="slot" v-for="(slot, index) in lists" ref="lists" :key="index">
      <div class="slot__window">
        <div class="slot__wrap">
          <div class="slot__item"  :class="{'a1':opt==1,'a2':opt==2,'a3':opt==3}" v-for="(opt, idx) in slot.items" :key="`${index}_${idx}`">
            <div class="slot__item_content">{{opt}}</div>
          </div>
          <template v-for="prize in prizeNum">
            <div class="slot__item slot__item--copy" :key="prize">
              <div class="slot__item_content">{{slot.itmes}}</div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <audio id="audio" preload="auto" :src="require('../assets/open.mp3')"></audio>
  </div>
</template>

<script>
const next = window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame || function(cb) { window.setTimeout(cb, 1000/60) }
export default {
  props:[
      'lists',
      'positions'
  ],
  data() {
    return {
      prizeNum: 3, // 可视区域每列展示的奖品数
      opts: null,
      startedAt: null,
    }
  },
  methods: {
    childFun3: function () {

      if (this.opts) {
        // 增加动画过程中，再次点击开始，立即结束动画，且置为对应中将位置
        this.opts.forEach(opt => {
          opt.isFinished = true
          const pos = -opt.finalPos
          opt.el.style.transform = "translateY(" + pos + "px)"
        })
        return
      }
      this.opts = this.lists.map((data, i) => {
        const slot = this.$refs.lists[i]; // map(function(){})利用map便利slots的每一个选项组,最终得到return的返回值
        const itemHeight = document.getElementsByClassName('slot__item')[0].offsetHeight
        // const choice = Math.floor(0.5* data.items.length); // 随机生成一个[0,data.items.length]的整数(floor向下取整)
        const choice = this.positions; // 随机生成一个[0,data.items.length]的整数(floor向下取整)
        // console.log("choice", i, data.items[choice])
        const opts = {
          el: slot.querySelector(".slot__wrap"), //指向奖项元素的父级
          finalPos: choice * itemHeight, // itemHeight 为每一个奖品滚动标签的高度
          startOffset: 1000 + 4 * 500 + 3 * 500, // 影响转的圈数
          height: data.items.length * itemHeight,
          duration: 3000 + i* 200, // milliseconds    //i 可以慢慢停止。   直接数字就一起停止
          isFinished: false,
        };
        return opts
      })
      // console.log(this.opts) //这个时候this.opts已经和opts一模一样了
      next(this.animate) // 开启动画
    },
    animate: function (timestamp) {
      if(!this.opts) return
      // timestamp当前的方法持续的毫秒数
      if (this.startedAt == null) {
        this.startedAt = timestamp // 动画初始时间
      }
      const timeDiff = timestamp - this.startedAt; //动画持续的时间
      // console.log(timestamp, this.opts)
      this.opts.forEach((opt) => {
        if (opt.isFinished) {
          return
        }
        const timeRemaining = Math.max(opt.duration - timeDiff, 0); // 总的持续时间 - 动画持续时间 = 剩下的时间,0表示结束
        const power = 3
        const offset =
          (Math.pow(timeRemaining, power) / Math.pow(opt.duration, power)) *
          opt.startOffset; // Math.pow(timeRemaining, power)表示: timeRemaining 的3 次幂; // negative, such that slots move from top to bottom
        const pos = -1 * Math.floor((offset + opt.finalPos) % opt.height)
        opt.el.style.transform = "translateY(" + pos + "px)"
        if (timeDiff > opt.duration) {
          opt.isFinished = true
        }
      })
      if (this.opts.every((o) => o.isFinished)) {
        this.opts = null
        this.startedAt = null
        // console.log('finished')
      } else {
        next(this.animate)
      }
    },
  },
  created() {
    console.log(this.lists)
  }
};
</script>

<style  scoped>
  .slot-machine{
    height: 157px;
    display: flex;
    justify-content: center;
  }
.slot__window {
  width: 259px;
  height: 157px;
  overflow: hidden;
}
.slot__item {
  width: 259px;
  height: 157px;
  position: relative;
}
.a1{
  background-image:url(../assets/quality-a-icon.png) ;
}
.a2{
  background-image:url(../assets/quality-b-icon.png) ;
}
.a3{
  background-image:url(../assets/quality-c-icon.png) ;
}
.slot__item_content{
 margin: auto;
 width: 259px;
 height: 157px;
 position: relative;
}
.slot__item_content img{
  position: absolute;
  max-width:200px;
  width: auto;
  max-width: 130px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>
